<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
		<style>
			textarea {
				width: 90%;
				height: 200px;
				padding: 0.5rem;
			}

			.grid td {}
		</style>
	</head>
	<body class="p-10">
		<div class="row">
			<div class="col-1">
				<div>
					<div>源文本：</div>
					<textarea id="txt1"></textarea>
				</div>
				<div>
					<div>转换后：</div>
					<textarea id="txt2"></textarea>
				</div>
				<div>
					<button onclick="swapInput()">交换文本</button>
					<br />
					<button onclick="urlEncode()">+ URL 编码</button>
					<button onclick="urlDecode()">- URL 解码</button>
					<button onclick="urlEncode2()">+ URL 编码(Component)</button>
					<button onclick="urlDecode2()">- URL 解码(Component)</button>
					<br />
					<button onclick="escEncode()">+ Escape 编码</button>
					<button onclick="escDecode()">- Escape 解码</button>
				</div>
			</div>
			<div class="col-1">
				<ul class="d-list">
					<li>不编码字符 68 个：0-9 a-z A-Z -*._</li>
					<li>escape 不编码字符 69 个： /@</li>
					<li>encodeURL 不编码字符 82 个： ! ' ( ) ~ / # $ & , : ; = ? + @</li>
					<li>encodeURLComponent 不编码字符 71 个：! ' ( ) ~</li>
					<li>%u开头的为Unicode 编码，即 encodeURL 或 encodeURLComponent</li>
					<li>% 进行Unicode编码后为%25，即%25u 开头的一般为两次 Unicode 编码</li>
				</ul>
				<table class="grid">
					<tr>
						<th></th>
						<th>不编码</th>
						<th>不编码</th>
						<th>描述</th>
					</tr>
					<tr>
						<td>escape</td>
						<td>0-9 a-z A-Z * - .  _ </td>
						<td> + / @</td>
						<td>%u开头，Unicode编码</td>
					</tr>
					<tr>
						<td>encodeURL</td>
						<td>0-9 a-z A-Z * - .  _ </td>
						<td> + / @ ! ' ( )  ~ # $ & , : ; = ?</td>
						<td></td>
					</tr>
					<tr>
						<td>encodeURLComponent</td>
						<td>0-9 a-z A-Z  * - . _</td>
						<td> ! ' ( ) ~ </td>
						<td></td>
					</tr>
				</table>
				<table class="grid">
					<tr>
						<th>字符</th>
						<th>escape</th>
						<th>encodeURL</th>
						<th>eComponent</th>
					</tr>
					<tr>
						<td>空格</td>
						<td>%20</td>
						<td>%20</td>
						<td>%20</td>
					</tr>
					<tr>
						<td>+</td>
						<td>+</td>
						<td>+</td>
						<td>%2B</td>
					</tr>
					<tr>
						<td>/</td>
						<td>/</td>
						<td>/</td>
						<td>%2F</td>
					</tr>
					<tr>
						<td>@</td>
						<td>@</td>
						<td>@</td>
						<td>%40</td>
					</tr>
					<tr>
						<td><b>%</b></td>
						<td>%25</td>
						<td>%25</td>
						<td>%25</td>
					</tr>
					<tr>
						<td>?</td>
						<td>%3F</td>
						<td>/</td>
						<td>%3F</td>
					</tr>
					<tr>
						<td>#</td>
						<td>%23</td>
						<td>#</td>
						<td>%23</td>
					</tr>
				</table>
				<h3>escape 编码</h3>
				<ul class="d-list">
					<li>不编码ASCII字符</li>
					<li>普通字符进行Unicode 编码，编码后格式为 %uxxxx</li>
					<li>\u000 到 \u00ff的字符，编码后格式为 %xx</li>
					<li>等同与 Unicode 编码</li>
				</ul>
				<h3>encodeURI 编码</h3>
				<ul class="d-list">
					<li>不编码ASCII字符</li>
					<li>普通字符先进行Unicode 编码 %uxxxx</li>
					<li>然后转义为16进制 %xx</li>
				</ul>
				<h3>encodeURLComponent 编码</h3>
				<ul class="d-list">
					<li>与encodeURI大致相同</li>
					<li>区别在于，encodeURL 不对用于分隔 URL 各部分的符号编码，即 /?&@#$=,:; ，而后者会编码</li>
				</ul>
			</div>
		</div>
		<script>
			function swapInput() {
				let temp = $("#txt1").val();
				$("#txt1").val($("#txt2").val());
				$("#txt2").val(temp);
			}

			function templateEncode(fn) {
				let src = $("#txt1").val();
				let dst = fn(src);
				$("#txt2").val(dst);
			}

			// URL 编码
			function urlEncode() {
				templateEncode(src => {
					return encodeURI(src);
				})
			}

			// URL 解码
			function urlDecode() {
				templateEncode(src => {
					return decodeURI(src);
				})
			}

			function urlEncode2() {
				templateEncode(src => {
					return encodeURIComponent(src);
				})
			}

			function urlDecode2() {
				templateEncode(src => {
					return decodeURIComponent(src);
				})
			}

			function escEncode() {
				templateEncode(src => {
					return escape(src);
				})
			}

			function escDecode() {
				templateEncode(src => {
					return unescape(src);
				})
			}
		</script>
	</body>
</html>
